<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-09-12 11:16
  PageName：a_Dynamic.html
  Function：伪类选择器 - 动态伪类
  URL：http://localhost:8080/d4_selector_pseudoclass/a_Dynamic.html
-->

<head>
    <meta charset="UTF-8">
    <title>伪类选择器 - 动态伪类</title>

    <style>
        /* =============================================================================
           HTML5 display definitions
           ========================================================================== */
        article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
            display: block;
        }

        audio, canvas, video {
            display: inline-block;
            *display: inline;
            *zoom: 1;
        }

        audio:not([controls]) {
            display: none;
        }

        [hidden] {
            display: none;
        }

        /* =============================================================================
             Base
             ========================================================================== */

        /*
         * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
         * 2. Force vertical scrollbar in non-IE
         * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
         */
        html {
            font-size: 100%;
            overflow-y: scroll;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        body {
            margin: 0;
            font-size: 13px;
            line-height: 1.231;
        }

        body, button, input, select, textarea {
            font-family: sans-serif;
            color: #222;
        }

        /*
         * Remove text-shadow in selection highlight:
         * These selection declarations have to be separate
         * Also: hot pink! (or customize the background color to match your design)
         */
        ::-moz-selection {
            background: #fe57a1;
            color: #fff;
            text-shadow: none;
        }

        ::selection {
            background: #fe57a1;
            color: #fff;
            text-shadow: none;
        }

        /* =============================================================================
             Links
           ========================================================================== */
        a {
            color: #00e;
        }

        a:visited {
            color: #551a8b;
        }

        a:hover {
            color: #06e;
        }

        a:focus {
            outline: thin dotted;
        }

        /* Improve readability when focused and hovered in all browsers */
        a:hover, a:active {
            outline: 0;
        }

        body {
            background: #f7f7f7;
        }

        #container {
            width: 530px;
            margin: 60px auto;
            list-style: none;
            padding: 0 77px;
        }

        #container ul {
            width: 400px;
        }

        #container li {
            display: inline;
        }

        /* 新建内部样式表，定义基本的按钮类样式 */
        a.button {
            display: block;
            float: left;
            position: relative;
            height: 25px;
            width: 80px;
            margin: 0 10px 18px 0;
            text-decoration: none;
            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: bold;
            line-height: 25px;
            text-align: center;

            /* 定义圆角效果，彰显按钮的金属特质 */
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        /* 定义双边框样式 */
        a.button:before, a.button:after {
            content: '';
            position: absolute;
            left: -1px;
            height: 25px;
            width: 80px;
            bottom: -1px;

            /* 为边框定义阴影小果果 */
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        a.button:before {
            height: 23px;
            bottom: -4px;
            border-top: 0;
            -webkit-border-radius: 0 0 3px 3px;
            -moz-border-radius: 0 0 3px 3px;
            border-radius: 0 0 3px 3px;
            -webkit-box-shadow: 0 1px 1px 0px #bfbfbf;
            -moz-box-shadow: 0 1px 1px 0px #bfbfbf;
            box-shadow: 0 1px 1px 0px #bfbfbf;
        }

        /* 为该类样式增加行为样式，让按钮实现动态效果 */
        /* 定义鼠标经过和访问过按钮伪类状态类样式，设计渐变背景色特效 */
        /* GRAY */
        a.gray, a.gray:hover, a.gray:visited {
            color: #555;
            border-bottom: 4px solid #b2b1b1;
            text-shadow: 0px 1px 0px #fafafa;
            background: #eee;
            background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e2e2e2));
            background: -moz-linear-gradient(top, #eee, #e2e2e2);
            box-shadow: inset 1px 1px 0 #f5f5f5;
        }

        .gray:before, .gray:after {
            border: 1px solid #cbcbcb;
            border-bottom: 1px solid #a5a5a5;
        }

        a.gray:hover {
            background: #e2e2e2;
            background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#eee));
            background: -moz-linear-gradient(top, #e2e2e2, #eee);
        }

        /* PINK */
        a.pink, a.pink:hover, a.pink:visited {
            color: #913944;
            border-bottom: 4px solid #cb5462;
            text-shadow: 0px 1px 0px #f9a0ad;
            background: #f56778;
            background: -webkit-gradient(linear, left top, left bottom, from(#f997b0), to(#f56778));
            background: -moz-linear-gradient(top, #f997b0, #f56778);
            box-shadow: inset 1px 1px 0 #fbc1d0;
        }

        .pink:before, .pink:after {
            border: 1px solid #ee8090;
            border-bottom: 1px solid #b84d5a;
        }

        a.pink:hover {
            background: #f56778;
            background: -webkit-gradient(linear, left top, left bottom, from(#f56778), to(#f997b0));
            background: -moz-linear-gradient(top, #f56778, #f997b0);
        }

        /* BLUE */
        a.blue, a.blue:hover, a.blue:visited {
            color: #42788e;
            border-bottom: 4px solid #589cb6;
            background: #abe4f8;
            text-shadow: 0px 1px 0px #bee9fa;
            background: -webkit-gradient(linear, left top, left bottom, from(#abe4f8), to(#74d0f4));
            background: -moz-linear-gradient(top, #abe4f8, #74d0f4);
            box-shadow: inset 1px 1px 0 #b2e6f8;
        }

        .blue:before, .blue:after {
            border: 1px solid #8cc5d9;
            border-bottom: 1px solid #4e8aa1;
        }

        a.blue:hover {
            background: #74d0f4;
            background: -webkit-gradient(linear, left top, left bottom, from(#74d0f4), to(#abe4f8));
            background: -moz-linear-gradient(top, #74d0f4, #abe4f8);
        }

        /* GREEN */
        a.green, a.green:hover, a.green:visited {
            color: #5d7731;
            border-bottom: 4px solid #799545;
            text-shadow: 0px 1px 0px #d5e8aa;
            background: #cae285;
            background: -webkit-gradient(linear, left top, left bottom, from(#cae285), to(#a3cd5a));
            background: -moz-linear-gradient(top, #cae285, #a3cd5a);
            box-shadow: inset 1px 1px 0 #cce3a1;
        }

        .green:before, .green:after {
            border: 1px solid #98b85b;
            border-bottom: 1px solid #6d883b;
        }

        a.green:hover {
            background: #a3cd5a;
            background: -webkit-gradient(linear, left top, left bottom, from(#a3cd5a), to(#cae285));
            background: -moz-linear-gradient(top, #a3cd5a, #cae285);
        }

        /* TURQUOISE */
        a.turquoise, a.turquoise:hover, a.turquoise:visited {
            color: #437b7d;
            border-bottom: 4px solid #4fa7aa;
            text-shadow: 0px 1px 0px #9fd5d7;
            background: #81e8eb;
            background: -webkit-gradient(linear, left top, left bottom, from(#b7f2f4), to(#81e8eb));
            background: -moz-linear-gradient(top, #b7f2f4, #81e8eb);
            box-shadow: inset 1px 1px 0 #d4f8f8;
        }

        .turquoise:before, .turquoise:after {
            border: 1px solid #87d3d5;
            border-bottom: 1px solid #47989b;
        }

        a.turquoise:hover {
            background: #81e8eb;
            background: -webkit-gradient(linear, left top, left bottom, from(#81e8eb), to(#b7f2f4));
            background: -moz-linear-gradient(top, #81e8eb, #b7f2f4);
        }

        /* BLACK */
        a.black, a.black:hover, a.black:visited {
            color: #fff;
            border-bottom: 4px solid #414141;
            text-shadow: 0px 1px 0px #2f2f2f;
            background: #656565;
            background: -webkit-gradient(linear, left top, left bottom, from(#656565), to(#444));
            background: -moz-linear-gradient(top, #656565, #444);
            box-shadow: inset 1px 1px 0 #939393;
        }

        .black:before, .black:after {
            border: 1px solid #535353;
            border-bottom: 1px solid #343434;
        }

        .black:after {
            border: 1px solid #5a5a5a;
        }

        a.black:hover {
            background: #444;
            background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#656565));
            background: -moz-linear-gradient(top, #444, #656565);
        }

        /* DARK GRAY */
        a.darkgray, a.darkgray:hover, a.darkgray:visited {
            color: #555;
            border-bottom: 4px solid #878787;
            text-shadow: 0px 1px 0px #d6d6d6;
            background: #d1d1d1;
            background: -webkit-gradient(linear, left top, left bottom, from(#d1d1d1), to(#afafaf));
            background: -moz-linear-gradient(top, #d1d1d1, #afafaf);
            box-shadow: inset 1px 1px 0 #e3e3e3;
        }

        .darkgray:before, .darkgray:after {
            border: 1px solid #b4b4b4;
            border-bottom: 1px solid #7b7b7b;
        }

        a.darkgray:hover {
            background: #afafaf;
            background: -webkit-gradient(linear, left top, left bottom, from(#afafaf), to(#d1d1d1));
            background: -moz-linear-gradient(top, #afafaf, #d1d1d1);
        }

        /* YELLOW */
        a.yellow, a.yellow:hover, a.yellow:visited {
            color: #996633;
            border-bottom: 4px solid #b98a37;
            text-shadow: 0px 1px 0px #fedd9b;
            background: #feda71;
            background: -webkit-gradient(linear, left top, left bottom, from(#feda71), to(#febe4d));
            background: -moz-linear-gradient(top, #feda71, #febe4d);
            box-shadow: inset 1px 1px 0 #fee9aa;
        }

        .yellow:before, .yellow:after {
            border: 1px solid #eab551;
            border-bottom: 1px solid #9f7630;
        }

        a.yellow:hover {
            background: #febe4d;
            background: -webkit-gradient(linear, left top, left bottom, from(#febe4d), to(#feda71));
            background: -moz-linear-gradient(top, #febe4d, #feda71);
        }

        /* PURPLE */
        a.purple, a.purple:hover, a.purple:visited {
            color: #7b5777;
            border-bottom: 4px solid #946890;
            text-shadow: 0px 1px 0px #eacae6;
            background: #e8c4e4;
            background: -webkit-gradient(linear, left top, left bottom, from(#e8c4e4), to(#d698d0));
            background: -moz-linear-gradient(top, #e8c4e4, #d698d0);
            box-shadow: inset 1px 1px 0 #f2dcef;
        }

        .purple:before, .purple:after {
            border: 1px solid #da9fd4;
            border-bottom: 1px solid #865d82;
        }

        a.purple:hover {
            background: #d698d0;
            background: -webkit-gradient(linear, left top, left bottom, from(#d698d0), to(#e8c4e4));
            background: -moz-linear-gradient(top, #d698d0, #) e8c4e4;
        }

        /* DARK BLUE */
        a.darkblue, a.darkblue:hover, a.darkblue:visited {
            color: #515f6a;
            border-bottom: 4px solid #62727e;
            text-shadow: 0px 1px 0px #c4d0da;
            background: #becbd6;
            background: -webkit-gradient(linear, left top, left bottom, from(#becbd6), to(#8da5b7));
            background: -moz-linear-gradient(top, #becbd6, #8da5b7);
            box-shadow: inset 1px 1px 0 #d8e0e6;
        }

        .darkblue:before, .darkblue:after {
            border: 1px solid #a1aeb7;
            border-bottom: 1px solid #5d6b75;
        }

        a.darkblue:hover {
            background: #8da5b7;
            background: -webkit-gradient(linear, left top, left bottom, from(#8da5b7), to(#becbd6));
            background: -moz-linear-gradient(top, #8da5b7, #becbd6);
        }

        /* ACTIVE STATE */
        /* 利用：active伪类选择器定义对象激活下的样式效果 */
        a.button:active {
            border: none;
            bottom: -4px;
            margin-bottom: 22px;
            -webkit-box-shadow: 0 1px 1px #fff;
            -moz-box-shadow: 0 1px 1px #fff;
            box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
        }

        a.button:active:before, a.button:active:after {
            border: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        /* MODERNIZR FALLBACK */
        .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generatedcontent a.button, .no-generatedcontent a.button:visited {
            background: url(images/sprite.png) no-repeat 0 0px;
            height: 32px;
            width: 82px;
        }

        .no-cssgradients a.button:hover, .no-borderradius a.button:hover, .no-generatedcontent a.button:hover {
            background: url(images/sprite.png) no-repeat 0 -32px;
        }

        .no-cssgradients a.button:active, .no-borderradius a.button:active, .no-generatedcontent a.button:active {
            background: url(images/sprite.png) no-repeat 0 -64px;
            bottom: 0;
            line-height: 35px;
        }

        .no-cssgradients a.gray, .no-cssgradients a.gray:visited, .no-cssgradients a.gray:hover {
            background-position-x: 0;
        }

        .no-cssgradients a.pink, .no-cssgradients a.pink:visited, .no-cssgradients a.pink:hover {
            background-position-x: -82px;
        }

        .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover {
            background-position-x: -164px;
        }

        .no-cssgradients a.green, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover {
            background-position-x: -246px;
        }

        .no-cssgradients a.turquoise, .no-cssgradients a.turquoise:visited, .no-cssgradients a.turquoise:hover {
            background-position-x: -328px;
        }

        .no-cssgradients a.black, .no-cssgradients a.black:visited, .no-cssgradients a.black:hover {
            background-position-x: -410px;
        }

        .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visited, .no-cssgradients a.darkgray:hover {
            background-position-x: -492px;
        }

        .no-cssgradients a.yellow, .no-cssgradients a.yellow:visited, .no-cssgradients a.yellow:hover {
            background-position-x: -574px;
        }

        .no-cssgradients a.purple, .no-cssgradients a.purple:visited, .no-cssgradients a.purple:hover {
            background-position-x: -656px;
        }

        .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visited, .no-cssgradients a.darkblue:hover {
            background-position-x: -738px;
        }

        .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a.button:hover, .no-cssgradients a.button:before, .no-cssgradients a.button:after, .no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button:before, .no-borderradius a.button:after, .no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover, .no-generatedcontent a.button:before, .no-generatedcontent a.button:after {
            border: 0;
        }
    </style>
</head>

<body>
<ul id="container">
    <li><a href="#" class="button gray">Download</a></li>
    <li><a href="#" class="button pink">Download</a></li>
    <li><a href="#" class="button blue">Download</a></li>
    <li><a href="#" class="button green">Download</a></li>
    <li><a href="#" class="button turquoise">Download</a></li>
    <li><a href="#" class="button black">Download</a></li>
    <li><a href="#" class="button darkgray">Download</a></li>
    <li><a href="#" class="button yellow">Download</a></li>
    <li><a href="#" class="button purple">Download</a></li>
    <li><a href="#" class="button darkblue">Download</a></li>
</ul>
</body>
</html>
